﻿html,body {
    background-color:#F1F1F1;
    height:100%;
    width:100%;
    margin:0;
    padding:0;
    position:absolute;
}
.bg {
    background: rgba(0, 0, 0,0.3);
}
.wrapper {
    box-sizing: border-box;
    height: 800px;
    width: 700px;
    position: relative;
    margin: -400px 0 0 -350px;
    left: 50%;
    top: 50%;
}
h1 {
    color: #9bba8c;
    position: relative;
	left: 20px;
	 top:20px;
}

h3 {
    color: #658d81;
    font-weight: 800;
    position: relative;
	left: 20px;
	top:20px;
}

.form-itemGroup {
    border-right:50px
}
.input {
    background-color: transparent;
    border: none;
    border-bottom: 2px solid #CCC;
    color: dodgerblue;
    caret-color: dodgerblue;
    box-sizing: border-box;
    font-family: 'Arvo';
    font-size: 18px;
    height: 50px;
    left: 80px;
    margin: -25px 50px 0 0px;
    padding: 0px 0px;
    position: relative;
    top: 50px;
    width: 600px;
}
.input:focus {
    outline: none;
}
.submit{
	background-color:#ddd;
	display:inline-block;
	color:#fff;
	background-color:dodgerblue;
	position:relative;
	height:40px;
	width:280px;
	margin:60px 0 0 20px;
	white-space:nowrap;
	border-radius:2px;
	outline:0px;
	border-style:none;
	transition:all 0.2s linear;
}
.submit:hover{
	background-color:#107bf1;
}

input::-webkit-input-placeholder {
    color: #AAA;
    transition: all 0.4s linear;
    -webkit-transition: all 0.4s linear;
	-moz-transition: all 0.4s linear;
	-o-transition: all 0.4s linear;
}

input:hover::-webkit-input-placeholder {
    color: dodgerblue;
}

input:focus::-webkit-input-placeholder {
    color: dodgerblue;
}
.underline {
    background-color: dodgerblue;
    display: inline-block;
    width: 0px;
    height: 2px;
    top: 33px;
    margin-left: 80px;
    position: relative;
    transition: all 0.4s linear;
    -webkit-transition: all 0.4s linear;
	-moz-transition-transition: all 0.4s linear;
	-o-transition: all 0.4s linear;
}
.input:hover + .underline {
    width: 600px;
}
.input:focus + .underline {
    width: 600px;
}

